import React from 'react';
import { Modal, Button, Progress, message, Icon } from 'antd';
import s from './index.module.less';
import config from '../../config';

const { baseUrl } = config;

class UpdateModal extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isUpdatting: false,
            percent: 0,
            downloaded: false,
        }
    }

    componentWillMount() {

        const { ipcRenderer } = window.electron;

        // 定义更新错误
        ipcRenderer.on("message", (event, msg) => {
            if (msg.error) {
                message.warn('下载更新发生错误！');
                this.setState({ isUpdatting: false, percent: 0 });
                console.log('-----update error-----', msg.error);
            } else {
                console.log(`-----update ${msg.text}-----`, msg.info);
                if (msg.downloaded) {
                    this.setState({ downloaded: true, percent: 100 });
                }
            }
        });

        //注意：“downloadProgress”事件可能存在无法触发的问题，那是因为下载速度很快，就会跳过“downloadProgress”事件，只需要限制一下下载网速就好了
        ipcRenderer.on("downloadProgress", (event, progressObj) => {
            console.log('-----update progress-----', progressObj);
            this.setState({ percent: progressObj.percent ? progressObj.percent.toFixed(0) : 0 });
        });
    }

    handleOk = () => {
        this.setState({ isUpdatting: true });
        const { ipcRenderer } = window.electron;
        ipcRenderer.send('checkForUpdate');
    }

    onCancel = () => {
        const { onCancel } = this.props;
        onCancel();
    }

    onDownload = () => {
        const { percent } = this.state;
        if (percent || percent > 0) {
            message.warn('正在下载请稍候');
            return;
        }
        // 检查更服务器版本信息
        const { ipcRenderer } = window.electron;
        //  更新的资源不是同一个服务，要去掉端口号
        const urlObj = new window.URL(baseUrl);
        ipcRenderer.send("openlinkurl", `${urlObj.protocol}//${urlObj.hostname}`);
    }

    render() {
        const { show, text, status, version } = this.props;
        const { isUpdatting, percent, downloaded } = this.state;

        return (
            <Modal
                width={400}
                visible={show}
                footer={null}
                centered={true}
                closable={false}
                maskClosable={false}
                wrapClassName={s.wrapModal}
            >
                <div className={s.content}>
                    <h3>
                        <span className="mdi mdi-package-up" />
                        版本更新
                        {version && <span className={s.version}>({version})</span>}
                    </h3>
                    {!isUpdatting ? <div className={s.text}>{text}</div> : null}
                    {isUpdatting ? (
                        <div className={s.progress}>
                            <div>
                                {downloaded ? '下载完成，正在准备重启应用' : '请不要退出应用，正在加载中'}
                                <div className="dot" />
                            </div>
                            <Progress percent={percent} status="active" />
                            <div className={s.tips}>
                                如果长时间无响应请手动下载安装新版本：
                                <span onClick={this.onDownload}>点击下载<Icon type="download" /></span>
                            </div>
                        </div>
                    ) : null}
                    <div className={s.footer}>
                        <Button disabled={isUpdatting} onClick={this.onCancel}>取消</Button>
                        <Button type="primary" disabled={(status !== 2) || isUpdatting} onClick={this.handleOk}>确定</Button>
                    </div>
                </div>
            </Modal>
        );
    }
}

export default UpdateModal